<template>
	<div class="page__bd">
		<view class="weui-cells__title green">配送信息</view>
		<view class="weui-cells weui-cells_after-title">
			<navigator url="/pages/goodaddress/main?type=sebuy" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
				<view class="weui-cell__bd" v-if="seleaddr">
					{{seleaddr.name+'/'+seleaddr.tel}}
					<br /> {{seleaddr.province+seleaddr.city+seleaddr.area+seleaddr.address}}
				</view>
				<view class="weui-cell__bd" v-else>请选择</view>
				<view class="weui-cell__ft weui-cell__ft_in-access"></view>
			</navigator>

		</view>
		<div class="line"></div>
		<view class="weui-cells weui-cells_after-title">
			<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
				<view class="weui-cell__bd">配送时间</view>
				<view class="weui-cell__ft weui-cell__ft_in-access">

					<picker mode="multiSelector" :value="date" @change="bindDateChange" @columnchange="changeDateTimeColumn1" :range="dateTimeArray1">
						<view class="picker">
							{{dateTimeArray1[0][date[0]]}}-{{dateTimeArray1[1][date[1]]}}-{{dateTimeArray1[2][date[2]]}} {{dateTimeArray1[3][date[3]]}}:{{dateTimeArray1[4][date[4]]}}
						</view>
					</picker>

				</view>
			</navigator>
			<view class="weui-cell weui-cell_input">
				<view class="weui-cell__hd">
					<view class="weui-label">卡片留言</view>
				</view>
				<view class="weui-cell__bd">
					<input class="weui-input" placeholder="填写您最美好的祝福" v-model="cardmsg" />
				</view>
			</view>
			<view class="weui-cell weui-cell_input">
				<view class="weui-cell__hd">
					<view class="weui-label">特殊要求</view>
				</view>
				<view class="weui-cell__bd">
					<input class="weui-input" placeholder="填写特殊要求" v-model="otherrequest" />
				</view>
			</view>
		</view>
		<div class="line"></div>
		<view class="weui-cells__title green">订购信息</view>
		<view class="weui-cells weui-cells_after-title">
			<view class="weui-cell weui-cell_input">
				<view class="weui-cell__hd">
					<view class="weui-label">订购人</view>
				</view>
				<view class="weui-cell__bd">
					<input class="weui-input" v-model="sendby" />
				</view>
				<view class="weui-cell__ft">
					<view class="weui-vcode-btn">
						<icon class="weui-icon-checkbox_circle radio" type="circle" size="23" v-if="noname==0" @click="nonames(0)"></icon>
						<icon class="weui-icon-checkbox_success radio" type="success" size="23" v-if="noname==1" @click="nonames(1)"></icon>

						<span>匿名配送</span></view>
				</view>
			</view>
			<view class="weui-cell weui-cell_input" v-if="usescore>0">
				<view class="weui-cell__hd">
					<view class="weui-label">使用积分</view>
				</view>

				<view class="weui-cell__ft">
					<view class="weui-vcode-btn">

						<icon class="weui-icon-checkbox_circle radio" type="circle" size="23" v-if="!isusescore" @click="isusescores()"></icon>
						<icon class="weui-icon-checkbox_success radio" type="success" size="23" v-if="isusescore" @click="isusescores()"></icon>

						<span>使用{{usescore}}积分</span></view>
				</view>
			</view>
			<view class="weui-cell weui-cell_input">
				<view class="weui-cell__hd">
					<view class="weui-label">订购人电话</view>
				</view>
				<view class="weui-cell__bd">
					<input class="weui-input" placeholder="方便花店通知收花情况" v-model="sendbytel" />
				</view>
			</view>
		</view>
		<view class="weui-cells__title green">商品信息</view>
		<view class="weui-cells weui-cells_after-title marginb">
			<view class="weui-cell">
				<view class="weui-cell__hd">
					<image :src="'https://tp5.blver.cn'+seleflw.goods_image" style="margin-right: 5px;vertical-align: middle;width:80px; height: 80px;"></image>
				</view>
				<view class="weui-cell__bd">{{seleflw.goods_title}}</view>
				<view class="weui-cell__ft">{{seleflw.selling_price}} × {{number}}</view>
			</view>
		</view>

		<div class="bottom_float_div pf row" style="z-index:100">

			<div class="collection " style="float:left;width:50%">

				<div>合计{{totalprice*number}}</div>

			</div>

			<div class="buyNow gw1" style="width:50%; float:left" @click="suborder()">
				<a style="color:#fff;">
					<div>立即购买</div>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import { requests } from "../../../static/js/network"
	import { getMonthDay, dateTimePicker } from "../../../static/js/datepicker"
	export default {
		data() {
			return {
				dateTimeArray1: null,
				noname: 0,
				date: null,
				score: '',
				isusescore: true,
				cardmsg: "",
				otherrequest: '',
				sendby: '',
				sendbytel: "",
				number: '',
				startYear: 2000,
				endYear: 2050
			}
		},
		computed: {
			...mapGetters([
				'seleaddr',
				'seleflw'
			]),
			usescore() {
				if(this.score > Number(this.seleflw.selling_price) * 100 - 1) {
					return Number(this.seleflw.selling_price) * 100 - 1 //上限
				} else {
					return Number(wx.getStorageSync('userinfo').score)
				}

			},
			totalprice() {
				return Number(this.seleflw.selling_price) - this.usescore / 100
			}
		},
		onLoad() {
			if(this.$root.$mp.query.type && this.$root.$mp.query.type=='sadd'){
				console.log('选择地址带参数回来的')
				
			}else{
				console.log('否则')
				
				Object.assign(this.$data, this.$options.data())
			}
			
			
			this.number = this.seleflw.number
			
			// 获取完整的年月日 时分秒，以及默认显示的数组
			var obj1 = dateTimePicker(this.startYear, this.endYear); // 精确到分的处理，将数组的秒去掉
			var lastArray = obj1.dateTimeArray.pop();
			var lastTime = obj1.dateTime.pop();

			this.dateTimeArray1 = obj1.dateTimeArray,
			this.date = obj1.dateTime

		},
		methods: {
			changeDateTimeColumn1(e) {
				var arr = this.date,
					dateArr = this.dateTimeArray1;

				arr[e.mp.detail.column] = e.mp.detail.value;
				dateArr[2] = getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);

				this.dateTimeArray1 = dateArr,
					this.date = arr

			},
			suborder() {
				let self = this
				if(this.seleaddr==null){
					wx.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 2000
					})
					return
				}
				
				console.log(wx.getStorageSync('fxsid'))
				requests({
					url: 'https://tp5.blver.cn/api/wechat/makeOrder',
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'content-type': 'application/x-www-form-urlencoded' // 默认值
					},
					data: {
						id: this.seleflw.id,
						addressid: this.seleaddr.id,
						sendtime: this.date,
						cardmsg: this.cardmsg,
						otherrequest: this.otherrequest,
						sendby: this.sendby,
						sendbytel: this.sendbytel,
						noname: this.noname,
						score: this.usescore,
						session3rd: wx.getStorageSync('userinfo').session3rd,
						fxsid: wx.getStorageSync('fxsid'),
						number: this.number
					},

					success: function(res) {
						console.log(res)
					
						if(res.data.status == 'error') {
							wx.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
							return
						}
						wx.requestPayment({
							'timeStamp': res.data.prepay_params.timestamp,
							'nonceStr': res.data.prepay_params.nonceStr,
							'package': res.data.prepay_params.package,
							'signType': 'MD5',
							'paySign': res.data.prepay_params.paySign,
							'success': function(res3) {

								console.log(res3)

							},
							'fail': function(res3) {

								requests({
									url: 'https://tp5.blver.cn/api/wechat/deleteFailOrder',
									method: 'POST',
									header: {
										'content-type': 'application/json',
										'content-type': 'application/x-www-form-urlencoded' // 默认值
									},
									data: {
										orderno: res.data.order_no,
										session3rd: wx.getStorageSync('userinfo').session3rd
									},
									success: function(res4) {
										console.log(res4)

										wx.showToast({
											title: '您的订单已取消',
											icon: 'none',
											duration: 2000
										})
										
										wx.redirectTo({ //保留当前页面，跳转到应用内的某个页面
											url: "/pages/index/main"
										})
									}
								})

							}
						})

					}
				})
			},
			isusescores() {
				this.isusescore = !this.isusescore
			},
			nonames(indexs) {
				if(indexs == 0) {
					this.noname = 1
				} else if(indexs == 1) {
					this.noname = 0
				}

			},
			bindDateChange(e) {

				this.date = e.mp.detail.value

			},
		}
	}
</script>

<style>
	.radio {
		vertical-align: text-top
	}
	
	.page__bd {
		font-size: 24rpx!important
	}
	
	.green {
		color: #FF5D5D
	}
	
	.line {
		background: #F0F0F0;
		height: 10rpx
	}
	
	.pf {
		position: fixed
	}
	
	.bottom_float_div {
		width: 100%;
		text-align: center;
		bottom: 0;
		background: #fff;
		left: 0;
		right: 0;
		max-width: 620px;
		margin: 0 auto
	}
	
	.marginb {
		margin-bottom: 45px
	}
	
	.row {
		flex-direction: row;
		display: flex
	}
	
	.pf {
		position: fixed
	}
	
	.collection {
		width: 16%;
		color: #999;
		height: 45px;
		line-height: 45px;
		border-top: 1px #cacaca solid
	}
	
	.buyNow {
		width: 42%;
		width: 100%;
		line-height: 45px;
		background-color: #f44;
		color: #fff
	}
</style>